<template>
  <div>
    <!-- tag筛选 -->
    <div
      class="filterItem"
      v-for="(item, index) in filterData"
      :key="'tag' + index"
    >
      <div class="filterAreaLabel" v-if="item.name">{{ item.name }}</div>
      <div
        :class="
          item.selectVal === tagItem.value
            ? 'filterAreaTag active'
            : 'filterAreaTag'
        "
        v-for="(tagItem, tagIndex) in item.tabList"
        :key="'tagItem' + tagIndex"
        @click="onClick(tagItem.value, index, tagItem)"
      >
        {{ tagItem.name }}
      </div>
    </div>
    <!-- 排序 -->
    <div class="sortArea">
      <div class="sortLeft">
        <div
          class="sortItem"
          v-for="(item, index) in sortData"
          :key="'sort' + index"
        >
          <div v-if="index !== 0" class="line"></div>
          <div
            :class="sortVal === item.value ? 'active' : ''"
            @click="changeSort(item.value)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="sortRgt">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CustomFilter',
  props: {
    filterData: {
      type: Array,
      default: function () {
        return [
          {
            name: '分类标签',
            value: '',
            selectVal: 'all',
            tabList: [
              {
                name: '全部',
                value: 'all',
              },
            ],
          },
          {
            name: '状态',
            value: '',
            selectVal: 'all',
            tabList: [
              {
                name: '全部',
                value: 'all',
              },
            ],
          },
        ];
      },
    },
    sortData: {
      type: Array,
      default: function () {
        return [
          {
            name: '综合排序',
            value: '0',
          },
          {
            name: '最新',
            value: '1',
          },
          {
            name: '最热',
            value: '2',
          },
        ];
      },
    },
    sortVal: {
      type: String,
      default: '0',
    },
  },
  data() {
    return {};
  },
  methods: {
    onClick(val, index, tagItem) {
      this.$emit('changeTag', val, index, tagItem);
    },
    changeSort(val) {
      this.$emit('changeSort', val);
    },
  },
};
</script>

<style lang="scss" scoped>
.filterItem {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .filterAreaLabel {
    min-width: 100px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 16px;
  }
  .filterAreaTag {
    padding: 0px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    color: $text-color;
    background: $secondary-color;
    margin-right: 12px;
    height: 32px;
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    cursor: pointer;
    &:hover {
      // color: #fff;
      // background: $primary-color;
    }
  }
  .active {
    color: #fff;
    background: $primary-color;
  }
}
.sortArea {
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .sortLeft {
    display: flex;
    align-items: center;
    .sortItem {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      color: $text-color-secondary;
      cursor: pointer;

      .line {
        width: 1px;
        height: 20px;
        margin: 0 28px;
        background: #e2e2e2;
      }

      .active {
        color: $text-color-primary;
      }
    }
  }
  .sortRgt {
    font-size: 14px;
    font-weight: 400;
    color: $text-color-secondary;
  }
}
</style>
